import { useGlobalStore } from "@/stores/modules/global";
import {
  ElButton,
  ElColorPicker,
  ElDialog,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElHeader,
  ElIcon,
  ElScrollbar,
} from "element-plus";
import { computed, defineComponent, onMounted, ref } from "vue";
import c from "./header.module.scss";
import IconMap from "@/config/sideNavIconMap";
import { storeToRefs } from "pinia";
import { DEFAULT_PRIMARY, LOGIN_URL } from "@/config";
import { useTheme } from "@/hooks/useTheme";
import { useUserStore } from "@/stores/modules/user";
import { useRouter } from "vue-router";
import { useTabsStore } from "@/stores/modules/tabs";

export default defineComponent({
  name: "base_header",
  setup() {
    const globalStore = useGlobalStore();
    const router = useRouter();
    const userStore = useUserStore();
    const tabsStore = useTabsStore();
    const isCollapse = computed(() => globalStore.isCollapse);
    const { primary } = storeToRefs(globalStore);
    const { changePrimary } = useTheme();
    const handleCollapse = () => {
      globalStore.setGlobalState("isCollapse", !globalStore.isCollapse);
    };
    // 预定义主题颜色
    const colorList = [
      DEFAULT_PRIMARY,
      "#daa96e",
      "#0c819f",
      "#409eff",
      "#27ae60",
      "#ff5c93",
      "#e74c3c",
      "#fd726d",
      "#f39c12",
      "#9b59b6",
    ];

    const openBaseSetting = () => {
      dialogVisible.value = true;
    };

    const dialogVisible = ref(false);

    const handleClose = () => {
      console.log(5);
    };

    const cancel = () => {
      dialogVisible.value = false;
    };

    const logout = () => {
      userStore.token = "";
      tabsStore.tabsMenuList = [];
      localStorage.removeItem("user");
      localStorage.removeItem("tabs");
      router.push(LOGIN_URL);
    };
    onMounted(() => {
      changePrimary(globalStore.primary);
    });

    return () => {
      return (
        <div>
          <ElHeader>
            {/* 头部左侧 */}
            <div class={c.collapse}>
              <ElIcon size="20" onClick={handleCollapse}>
                {isCollapse.value ? IconMap["Expand"] : IconMap["Fold"]}
              </ElIcon>
            </div>
            {/* 头部右侧 */}
            <div class={c.headerRight}>
              <ElDropdown
                v-slots={{
                  dropdown: () => (
                    <ElDropdownMenu>
                      {/* <ElDropdownItem>个人信息</ElDropdownItem> */}
                      <ElDropdownItem onClick={openBaseSetting}>
                        基础设置
                      </ElDropdownItem>
                      <ElDropdownItem onClick={logout}>退出登录</ElDropdownItem>
                    </ElDropdownMenu>
                  ),
                }}
              >
                <span class={c.user}>
                  {userStore.userInfo.username}
                  <ElIcon>{IconMap["ArrowDown"]}</ElIcon>
                </span>
              </ElDropdown>
            </div>
          </ElHeader>

          <ElDialog
            v-model={dialogVisible.value}
            title="基础设置"
            width="30%"
            onBeforeClose={handleClose}
            v-slots={{
              footer: () => (
                <span>
                  <ElButton onClick={cancel}>取消</ElButton>
                  <ElButton type="primary" onClick={cancel}>
                    确定
                  </ElButton>
                </span>
              ),
            }}
          >
            <ElScrollbar class={c.diolgConten}>
              <div class={c.color}>
                <span>主题颜色</span>
                <ElColorPicker
                  v-model={primary.value}
                  predefine={colorList}
                  onChange={changePrimary}
                />
              </div>
            </ElScrollbar>
          </ElDialog>
        </div>
      );
    };
  },
});
